<!--
 * @Author: 89-83-77
 * @Description: 请填写当前文件简介
 * @Date: 2025-03-27 17:02:34
 * @LastEditTime: 2025-03-27 17:02:48
 * @FilePath: \fz-yzt-webd:\work\client\src\views\Dashboard.vue
-->
<template>
    <div class="dashboard">
        <el-row :gutter="20">
            <el-col :span="16">
                <el-card>
                    <div ref="mainChart" style="height:400px;"></div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card>
                    <div ref="pieChart" style="height:400px;"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const mainChart = ref(null)
const pieChart = ref(null)

onMounted(() => {
    // 主图表
    const main = echarts.init(mainChart.value)
    main.setOption({
        title: { text: '访问趋势' },
        tooltip: { trigger: 'axis' },
        xAxis: { data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
        yAxis: {},
        series: [{
            type: 'line',
            data: [120, 200, 150, 80, 70, 110, 130]
        }]
    })

    // 饼图
    const pie = echarts.init(pieChart.value)
    pie.setOption({
        title: { text: '用户分布' },
        tooltip: { trigger: 'item' },
        series: [{
            type: 'pie',
            radius: '55%',
            data: [
                { value: 335, name: '管理员' },
                { value: 310, name: '编辑' },
                { value: 234, name: '普通用户' }
            ]
        }]
    })
})
</script>